<template>
	<view>
		<view class="container">
			<view class="top-wrap">
				<image class="m-back" src="/static/icon/icon_back7.png" mode="widthFix"></image>
				<view class="top-content">
					<view class="user-box flex-box mb45">
						<image class="img-head mr20" :src="userinfo.avatar" mode="aspectFill"></image>
						<view class="flex-1">
							<view class="flex-box col-f mb15">
								<view class="flex-1 fwb fs32">{{userinfo.nickname}}</view>
								<!-- <view class="fs24 mr20">演讲智慧vip</view>
								<view class="status">已开通</view> -->
							</view>
							<view class="phone fs24">{{userinfo.mobile}}</view>
						</view>
					</view>
					<view class="vip-box">
						<image class="img-back" src="/static/icon/icon_back8.png" mode="aspectFill"></image>
						<view class="inner">
							<view class="title mb30">VIP会员</view>
							<view class="flex-box">
								<view class="flex-1 fs24 col-f">开通会员享受更多权益</view>
								<view class="price">
									<text class="fs24">¥</text>
									<text class="fs40 fwb">{{minSalesprice}}</text>
									<text class="fs24">起</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="main">
				<view class="mb35 fs34 col-3 fwb">会员套餐</view>
				<view class="flex flex-align-start flex-wrap mb15">
					<view class="vip-menu" :class="vipIndex == index ? 'active' : ''" v-for="(item,index) in vipLists" :key="item.id" @click="bindChangeVip(index)">
						<view class="name">{{item.name}}</view>
						<view class="price">
							<text class="fs24">¥</text>
							<text class="fs40 fwb">{{item.salesprice}}</text>
							<text class="fs24">/{{item.unit_text}}</text>
						</view>
					</view>
					<!-- <view class="vip-menu">
						<view class="name">家庭教育</view>
						<view class="price">
							<text class="fs24">¥</text>
							<text class="fs40 fwb">365</text>
							<text class="fs24">/年</text>
						</view>
					</view>
					<view class="vip-menu">
						<view class="name">园长智慧</view>
						<view class="price">
							<text class="fs24">¥</text>
							<text class="fs40 fwb">365</text>
							<text class="fs24">/年</text>
						</view>
					</view> -->
				</view>
				<!--  -->
				<view class="mb20 fs34 col-3 fwb">会员权益</view>
				<view class="mb30 fs22 col1">开启会员认证畅想一下权益</view>
				<view class="rights-box flex flex-align-start flex-wrap tc" v-if="vipLists.length>0">
					<rich-text :nodes="vipLists[vipIndex].privilege_content"></rich-text>
					<!-- <view class="w25 mb15">
						<view class="icon"><image src="/static/icon/icon_vip_service.png" mode="aspectFit"></image></view>
						<view class="fs22 col1">专属客服</view>
					</view>
					<view class="w25 mb15">
						<view class="icon"><image src="/static/icon/icon_vip_guarantee.png" mode="aspectFit"></image></view>
						<view class="fs22 col1">免费保障</view>
					</view>
					<view class="w25 mb15">
						<view class="icon"><image src="/static/icon/icon_vip_ticket.png" mode="aspectFit"></image></view>
						<view class="fs22 col1">会员礼券</view>
					</view>
					<view class="w25 mb15">
						<view class="icon"><image src="/static/icon/icon_vip_privilege.png" mode="aspectFit"></image></view>
						<view class="fs22 col1">生活特权</view>
					</view> -->
				</view>
				<view class="mb25 pb30 fs34 col-3 fwb m-hairline--bottom">支付方式</view>
				<view class="mb25 m-hairline--bottom">
					<view class="pay-item flex-box">
						<image class="icon1 mr15" src="/static/icon/icon_wechat.png" mode="aspectFit"></image>
						<view class="fs28 col-black flex-1">微信支付</view>
						<image class="icon2" src="/static/icon/circle_selected.png.png" mode="aspectFit"></image>
					</view>
					<!-- <view class="pay-item flex-box">
						<image class="icon1 mr15" src="/static/icon/icon_alipay.png" mode="aspectFit"></image>
						<view class="fs28 col-black flex-1">支付宝支付</view>
						<image class="icon2" src="/static/icon/circle_selected.png" mode="aspectFit"></image>
					</view> -->
				</view>
				<!--  -->
				<view class="foot-box flex-box" v-if="platformStatus == 0 || !isIos">
					<view class="col-red fwb flex-1">
						<text class="fs24">¥</text>
						<text class="fs40">{{vipLists[vipIndex].salesprice}}</text>
					</view>
					<view class="btn-buy bg-1" @click="pay()">立即开通</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userinfo: {},
			vipLists: [{salesprice:0}],
			vipIndex: 0,
			minSalesprice:0,
			platformStatus: getApp().globalData.platformStatus,
			isIos: getApp().globalData.isIos,
		};
	},
	onLoad(options){
		this.userinfo = this.$user.getUserinfo(true);
		// #ifdef H5
		let openid = options.openid || '';
		if(openid == '' && this.$core.getCache('wx_openid')){
			openid = this.$core.getCache('wx_openid');
		}
		if(openid == ''){
		 location.href = getApp().globalData.apiBaseUri+"/xiluedu.user/auth?course_id="+options.course_id+'&target_url='+ encodeURIComponent(location.href);
		 return false;

		}
		this.$core.setCache('wx_openid', openid);
		this.fetchVipList();
		// #endif
		// #ifdef MP-WEIXIN
		this.fetchVipList();
		// #endif
		
		uni.$on('orderPay',function(data){
			//this.fetchOrderDetail();
		})
	},
	onUnload() {
		uni.$off('orderPay');
	},
	methods: {
		fetchVipList(){
			this.$core.get({url:'xiluedu.vip/lists',data:{},success:(ret)=>{
				if(ret.data.length <= 0){
					 uni.showModal({
						title: '提示',
						content: '抱歉,暂未上架VIP卡',
						success:function() {
							wx.navigateBack({
								delta:1
							})
						}
					 })
					 return false;
				}
				 this.vipLists = ret.data;
				 let minprice = 0;
				 for(let i=0;i<ret.data.length;i++){
					 if(i==0 || minprice < ret.data[i].salesprice){
						minprice = ret.data[i].salesprice;
					 }
				 }
				 this.minSalesprice = minprice;
			}});
		},
		bindChangeVip(index){
			this.vipIndex = index;
		},
		pay(){
			
			// if(this.platformStatus && getApp().globalData.isIos){
			// 	uni.showModal({
			// 		title:'提示',
			// 		content: "IOS端暂不支持支付",
			// 		success() {
						
			// 		}
			// 	})
			// 	return false;
			// }
			
			if(!this.vipLists[this.vipIndex].id){
				uni.showToast({'title':"请选择会员卡",icon:"none"});
				return false;
			}
			let data = {vip_id:this.vipLists[this.vipIndex].id,platform:'wxmini'};
			// #ifdef H5
			data.platform = 'wxpublic';
			// #endif
			this.$core.post({url:'xiluedu.vip_order/create_order',data:data,success:(ret)=>{
				uni.navigateTo({
					url: '/pages/pay/pay?type=vip&order_id='+ret.data.id+'&order_no='+ret.data.order_no+'&pay_price='+ret.data.pay_price
				})
			     //this.payment(ret.data);
			}});
		},
		payment(order){
			this.$core.post({url:'xiluedu.pay/pay',data:{type:'vip',pay_type:1,order_id:order.id,platform:'wxmini'},success:(ret)=>{
				let wxconfig =  ret.data;
				uni.requestPayment({
				    provider: 'wxpay',
					timeStamp: wxconfig.timeStamp,
					nonceStr: wxconfig.nonceStr,
					package: wxconfig.package,
					signType: wxconfig.signType,
					paySign: wxconfig.paySign,
					success: function (res) {
						console.log(res);
					},
					fail: function (err) {
						console.log(err);
					}
				});
			}});
		}
	}
};
</script>

<style scoped>
.top-wrap {
	position: relative;
}
.top-wrap .m-back {
	display: block;
	width: 100%;
	height: auto;
}
.top-wrap .top-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 50rpx 35rpx 0;
}
/*  */
.user-box .img-head {
	display: block;
	width: 93rpx;
	height: 93rpx;
	border-radius: 50%;
}
.user-box .status {
	width: 70rpx;
	height: 22rpx;
	background: linear-gradient(90deg, #d7aa4e, #f4c972);
	border-radius: 11rpx;
	font-size: 16rpx;
	font-weight: 500;
	color: #ffffff;
	line-height: 22rpx;
	text-align: center;
}
.user-box .phone {
	color: #ffdbb4;
}
/*  */
.vip-box {
	position: absolute;
	bottom: 0;
	left: 35rpx;
	right: 35rpx;
}
.vip-box .img-back {
	display: block;
	width: 100%;
	height: 210rpx;
}
.vip-box .inner {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	padding: 45rpx 35rpx 0;
}
.vip-box .title {
	font-size: 58rpx;
	font-weight: bold;
	color: #84a4f0;
	line-height: 60rpx;
	background: linear-gradient(0deg, #f4c3a0 0%, #f9d5b8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.vip-box .price {
	color: #ffdbb4;
}
/*  */
.main {
	padding: 50rpx 35rpx 30rpx;
}

.vip-menu {
	margin: 0 35rpx 35rpx 0;
	padding: 50rpx 0 0;
	width: 200rpx;
	height: 200rpx;
	background: #ffffff;
	box-shadow: 0 0 10rpx 1rpx rgba(0, 0, 0, 0.06);
	border-radius: 10rpx;
	text-align: center;
}
.vip-menu:nth-of-type(3n) {
	margin: 0 0 35rpx;
}
.vip-menu .name {
	margin: 0 0 25rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
}
.vip-menu .price {
	color: #ed1f34;
}
.vip-menu.active {
	box-shadow: unset;
	background: linear-gradient(180deg, #ed1f34, #f24682);
}
.vip-menu.active .name {
	color: #fff;
}
.vip-menu.active .price {
	color: #fff;
}
/*  */
.rights-box {
	margin: 0 0 50rpx;
	padding: 25rpx;
	background: #ffffff;
	box-shadow: 0 5rpx 18rpx 0 rgba(0, 0, 0, 0.1);
	border-radius: 30rpx;
}
.rights-box .icon {
	margin: 0 auto 15rpx;
	padding: 17rpx 0 0;
	width: 91rpx;
	height: 91rpx;
	background: rgba(237, 31, 52, 0.05);
	border-radius: 50%;
}
.rights-box .icon image {
	margin: 0 auto;
	display: block;
	width: 60rpx;
	height: 60rpx;
}
.pay-item {
	padding: 25rpx 0;
}
.pay-item .icon1 {
	display: block;
	width: 50rpx;
	height: 50rpx;
}
.pay-item .icon2 {
	display: block;
	width: 38rpx;
	height: 38rpx;
	border-radius: 50%;
}
.foot-box .btn-buy{
	width: 440rpx;
	height: 88rpx;
	border-radius: 6rpx;
	font-size: 28rpx;
	color: #FFFFFF;
	line-height: 88rpx;
	text-align: center;
}
@media only screen and (min-width: 800px) {
	.vip-box .img-back{
		height: 474rpx;
	}
	.vip-menu{
			margin: 0 35rpx 35rpx 0!important;
	}
}

</style>
